<template>
  <div class="admin">
    <el-container>
      <el-aside width="300px">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu default-active="2" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
              <el-menu-item index="/user">
                <i class="el-icon-user"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="/role">
                <i class="el-icon-s-custom"></i>
                <span slot="title">角色管理</span>
              </el-menu-item>
              <el-menu-item index="/ashudu">
                <i class="el-icon-s-operation"></i>
                <span slot="title">数独管理</span>
              </el-menu-item>
              <el-menu-item index="/ainter">
                <i class="el-icon-tickets"></i>
                <span slot="title">国内管理</span>
              </el-menu-item>
              <el-menu-item index="/aexter">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">国际管理</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <div style="float: left">
            <img src="" alt="">
            <span style="font-size: 20px">网易新闻后台管理</span>
          </div>
          <div style="font-size: 20px;float: right;height: 60px;width: 250px;">
            <span>欢迎：{{token}} &nbsp;&nbsp;&nbsp;</span>
            <span @click.prevent="exit()"><a style="text-decoration: none" href="">退出</a></span>
          </div>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>
          <span style="font-size: 10px;color: gray">@copyright &nbsp;&nbsp; 2021 - 2022</span>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "admin",
    data() {
      return {
        token: localStorage.getItem('admin'),
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      exit() {
        alert("退出成功！")
        localStorage.removeItem("admin");
        this.$router.push('/')
      }
    },
  }
</script>

<style scoped>
  .el-header {
    color: #333;
    line-height: 60px;
  }

  .el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    border-right: 1px solid rgba(228, 228, 228, 0.94);
    color: #333;
    height: 791px;
    line-height: 210px;
  }

  .el-main {
    background-color: #f5f5f5;
    color: #333;
  }

</style>
